<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-3">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="bounce">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app-3',
            data: {
                show: true
            }
        })
    </script>
</body>

<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
      }
      .bounce-leave-active {
        animation: bounce-in .5s reverse;
      }
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
</style>

</html>